<template>
    <div class="test-player-wrap">
      <vue3-video-player @play="onPlayerPlay"
                         @pause="onPlayerPause"
                         @ended="onPlayerEnded"
                         @timeupdate="onPlayerTimeupdate"
                         @seeked="onPlayerSeeked"
                         @error="errorHandle"
                         :src="videoUrl"
                         :title="title"
                         :cover="cover"
      >
      </vue3-video-player>
  </div>
</template>
<!--:view-core="viewCore"-->
<script>
import { reactive, toRefs } from "vue"
export default {
  props: {
    videoUrl: String,
    title: String,
    cover: String
  },
  setup(){
    const state = reactive({
      // isMobile: false,
      autoplay: false,  //自动播放
      //-------------------视频播放控制---------------------------
      loop: false,   //是否循环播放视频  default
      volume: 0.8,  //控制视频音量(0-1)  default
      muted: false,  //是否静音  default
      preload: "metadata", //预加载  default
      playList: [], //播放列表  default
      safeBufferTime: 2, //安全缓冲时间  default
      minPlayBufferTime: 1,  //最小缓冲时间  default
      resolution: "720p",  //默认清晰度  default
      //弹幕配置
      dashboardHideDelay: 2000,   //仪表盘隐藏延迟时间
      barrageFontSize: 22,  //弹幕字体
      barrageOpacity: 100,   //弹幕不透明度
      barragePosition: 100,  //弹幕位置
      //文件形式 二选一
      sources: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4',
      sourceArray: [
        {
          src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4',
          resolution: 720,
        },{
          src: 'https://media.vued.vanthink.cn/y2mate.com%20-%20sparkle_your_name_amv_K_7To_y9IAM_1080p.mp4',
          resolution: 1080,
        }
      ],
      title: '',   //视频标题
      // viewCore: [null],
      cover: '',
      logo: "",  //显示器logo
      playsinline: true, //播放进度条
      controls: true,   //待研究  default
      lang: "en",
      videoEl: {},
      el: {},
      barrages: [],  //弹幕
      viewCore: [(_, config) => { console.log("篇日志"+JSON.stringify(config)) }]
    })

    // listen event
    const onPlayerPlay = (player)=> {
      console.log('播放开始!', player)
    }
    const onPlayerPause = (player)=> {
      console.log('播放暂停!', player)
    }
    // @progress="onPlayerProgress"
    // const onPlayerProgress = (player) => {
    //
    //   console.log('当播放器正在下载媒体资源!', player)
    // }
    // @loadeddata="onPlayerLoadeddata"
    // const onPlayerLoadeddata = (player) => {
    //   console.log('当播放器开始加载第一帧时候触发!', player)
    // }
    const onPlayerEnded = (player)=> {
      console.log('当媒体播放结束时候触发!', player)
    }
    //当播放的媒体 currenttime 发生改变时候触发
    const onPlayerTimeupdate = (player) => {
      console.log('player Timeupdate!', player, player.target.currentTime);
    }
    // or listen state event 当用户 seek 操作完成触发。
    const onPlayerSeeked = (playerCurrentState) => {
      console.log('player Seeked!', playerCurrentState)
    }

    const errorHandle = (value)=>{
      if (value ===2024){
        console.log("资源找不到")
      }else if (value ===2024){
        console.log("网络错误")
      }else if (value ===2503){
        console.log("视频解码错误")
      }else if (value ===2504){
        console.log("视频无法播放")
      }else if (value ===2701){
        console.log("资源解析错误")
      }else if (value ===2801){
        console.log("位置原因")
      }
    }

    return {
      ...toRefs(state),
      onPlayerPlay,
      onPlayerPause,
      onPlayerEnded,
      onPlayerTimeupdate,
      onPlayerSeeked,
      errorHandle
    }
  }
}
</script>

<style>
.vue-core-video-player-containers {
  margin: 30px auto;
}
.test-player-wrap {
  width: 720px;
  position: relative;
  margin: auto;
}
@media all and (max-width: 768px) {
.test-player-wrap {
    width: 100%;
    height: auto;
  }
  .vcp-container, .vcp-container video{
    height: 218px;
  }
}
</style>
